<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head th:replace="/layout :: htmlhead" th:with="title='后台管理'">
</head>
<body>
<div class="layer_self_wrap">
    <form id="pwdForm" lay-filter="pwdForm" class="layui-form layui-form-pane" method="post"
          style="margin-top: 20px;margin-left: 50px" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">旧密码</label>
            <div class="layui-input-inline">
                <input lay-verify="required" name="oldpassword" class="layui-input" type="password"/>

            </div>
            <div class="layui-input-inline" style="height: 100%">
                <span id="oldpwderr"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-inline">
                <input name="newpassword" lay-verify="required" class="layui-input" type="password" id="pwd"/>
            </div>
            <div class="layui-input-inline" style="height: 100%">
                <span id="pwdmess" style="color: red;"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input lay-verify="required" name="confirmpassword" class="layui-input" type="password" id="repwd"/>
            </div>
            <div class="layui-input-inline" style="height: 100%">
                <span id="repwdmess" style="color: red;"></span>
            </div>
        </div>
        <div class="layui-form-item" style=" margin-top:50px">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-disabled" lay-submit="" lay-filter="submitPassword" id="submit">确定</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    layui.config({
        base: ctxPath + 'lib/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index'//主入口模块
    }).use(['form'], function () {
        var form = layui.form;
        $('#submit').attr('disabled', true);
        var pwdPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/;
        $('#pwd').keyup(function(e) {
           if (pwdPattern.test($(this).val())) {
                $('#pwdmess').css('color', 'green');
                $('#pwdmess').html('密码强度符合');
            }else{
               $('#pwdmess').css('color', 'red');
               $('#pwdmess').html('密码长度至少6位，由字母大小写，数字和符号组成');
           }
            return true;
        });
        $('#repwd').keyup(function(e) {
            var pwdval = $('#pwd').val();
            var redval = $('#repwd').val();
            if(pwdval != redval){
                $('#repwdmess').css('color', 'red');
                $('#repwdmess').html('新密码和确认密码不一致');
                $('#submit').addClass('layui-btn-disabled');
                $('#submit').attr('disabled', true);
            }else{
                $('#repwdmess').css('color', 'green');
                $('#repwdmess').html('新密码和确认密码一致');
                $('#submit').removeClass('layui-btn-disabled');
                $('#submit').attr('disabled', false);
            }
            return true;
        });
        form.on('submit(submitPassword)', function () {
            var modify_pwd = serializeObject($("#pwdForm"));
            //console.log(modify_pwd)
            $.ajax({
                type: "PUT",
                data: modify_pwd,
                url: ctxPath + "system/user/password",
                success: function (result) {
                    console.log(result)
                    if (result.code == "1") {
                        layer.confirm(result.message, function () {
                            window.location.reload();
                        });
                    }else {
                        $('#oldpwderr').html(result.message)
                        $('#oldpwderr').css('color','red')
                    }
                }
            });
        })
    })
</script>
</html>
